<template>
  <div class="left">
				<ul>
					<!-- 谁需要遍历就把数据加给谁的 -->
					<!--  -->
					<li v-for="m in leftData">{{m}}</li>
				</ul>
	</div>
</template>


<script>
export default {
    data(){
        return {
            leftData:['热销榜','优选水果','牛奶面包','天天特价','进口食品','冰激凌','饮料酒水','休闲零食','休闲零食','粮油调味','肉蛋时蔬','生活用品','休闲零食','其他分类'],

        }
    }
}
</script>

<style>
.left{
	/*margin-top: 5rem;*/
	overflow-y: scroll;
	width: 23%;
	
}
.left ul{
	background: rgba(246,246,246,.95);
	overflow-y: scroll;
  	height: 48rem;
    position: fixed;
}
.left ul li{
	padding: 1rem;
	text-align: center;
	color: #6d6d6d;
	font-size: 1.2rem;
	border-bottom: .2rem solid #e0e0e0;
	line-height: 1.5rem;
}
.first{
	background: url(/static/images/20170518150234_075444.jpg) right no-repeat;
	background-size: 40%;

}
.active{
	content:"";
	/*position: absolute;*/
	top: 0;
	left: 0;
	border-left: .5rem solid #ffd600;
}
.five{
	background: url(/static/images/20170518150319_022825.jpg) right no-repeat;
	background-size: 40%;
}
</style>
